<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
    Formatting context(格式化上下文)概念：它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用

    BFC即 Block Formatting Contexts(块级格式化上下文)，具有BFC特性的元素可以看作是隔离了的独立容器，
    容器里面的元素不会在布局上面影响到外面的元素，并且BFC具有普通容器所没有的特性(可以将BFC理解为封闭的箱子，里面不会影响外面)

      BFC(Block Formatting Context)：块级格式化上下文
         BFC决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，BFC提供了一个环境，
         HTML元素在这个环境中按照一定的规则进行布局。一个环境中的元素不会影响到其他环境中的布局

         BFC的原理
         1. BFC元素垂直方向的边距会发生重叠。属于不同BFC外边距不会发生重叠
         2. BFC的区域不会与浮动元素的布局重叠
         3. BFC元素是一个独立的容器，外面的元素不会影响里面的元素。里面的元素也不会影响外面的元素
         4. 计算BFC高度的时候，浮动元素也会参与计算

         如何创建BFC
         1. overflow不为visible
         2. float的值不为none
         3. position的值不为static或relative
         4. display属性为inline-blocks、table、table-cell、table-caption、flex、inline-flex
   -->
  </body>
</html>
